<template>
  <div class="singleMessage flex flex-between">
    <div class="flex">
      <img :src=avatar>
      <div class="center flex flex-column flex-around">
        <p class="name">{{ name }}</p>
        <div class="van-ellipsis content">{{ content }}</div>
      </div>
    </div>
    <p class="time">{{ time }}</p>
  </div>
</template>

<script>
export default {
  name: "singleMessage",
  props: {
    avatar: {
      typp: String,
      default: require("@/assets/img/common/avatar.jpg")
    },
    name: {
      typp: String,
      default: "name"
    },
    content: {
      typp: String,
      default: "content"
    },
    time: {
      typp: String,
      default: "00:00"
    }
  }
}
</script>

<style lang="less" scoped>
.singleMessage {
  padding: .4rem .3rem;
  border-bottom: .001rem solid #f2f2f2;

  img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .15rem;
    margin-right: .3rem;
  }

  .center {
    width: 6.4rem;

    .name {
      font-size: .47rem;
    }

    .content {
      font-size: .4rem;
      color: #a7a7a7;
    }
  }

  .time {
    font-size: .3rem;
    color: #a7a7a7;
  }
}
</style>